import React from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
import { Button, Icon, Upload } from 'antd'

class Region extends React.Component {
  state= {
    loading: false,
    multiple: true,
    changeNum: 0,
    token: localStorage.getItem("token"),
    method: 'post'
  }
  componentDidMount = () => {
    this.componentWillReceiveProps(this.props)
  }
  componentWillReceiveProps (nextProps) {
      if ('fileList' in nextProps) {
          if (nextProps.fileList) {
              this.setState({fileList: nextProps.fileList})
          }
      }
  }
  onChange = (info) => {
      let fileList = info.fileList;
      fileList = fileList.map((file) => {
          if (file.response) {
              file.url = file.response.data.src;
          }
          return file;
      });
      this.setState({ fileList }, () => {
          // this.props.onChange(this.state.fileList)
      });
      console.log(fileList)
      this.props.onChangeFile && this.props.onChangeFile(fileList)
      return fileList;
  }

  render () {
    let action = axios.defaults.baseURL + '/Common/uploadImg'
    return (
      <Upload
        name="img_file"
        className="uploader-container"
        action={action}
        headers={{authorization: 'authorization-text' }}
        method={this.state.method}
        onChange={this.onChange}
        fileList={this.state.fileList}
      >
        <div className="upload-line">
            <Button>
                <Icon type="upload" /> 点击上传
            </Button>
        </div>
      </Upload>
    )
  }
}

Region.propTypes = {
  value: PropTypes.array,
  onChange: PropTypes.func,
  fileList: PropTypes.any,
  onDisabledChange: PropTypes.func,
  onChangeFile: PropTypes.func

}

export default Region
